<template>
  <div>
    <nav>
      <div class="study" @click="toStudy">学习</div>
      <div class="review" @click="toReview1">复习1</div>
      <div class="review" @click="toReview2">复习2</div>
    </nav>
    <router-view />
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HomeView',
  components: {
  },
  data () {
    return {
    }
  },
  async created () {
    // this.getAppVersion()
    this.getStage()
    this.getAllWord()
  },
  methods: {
    async getAppVersion () {
      const { data: { data } } = await axios({
        url: process.env.VUE_APP_BASE_API + '/info/get_app_version'
      })
      console.log(data)
    },
    getStage() {
      this.stage_list = [
        {
          id: 1, // 1-100 为stage
          name: '基础阶段一',
          price: '0.00',
          children: [
            {
              id: 101, // 100-10000为chapter
              name: '各种动物',
              children: [
                // {
                //   id: 10001, // 10000以上为class
                //   type: 3,
                //   name: '宠物',
                //   word_ids: [6, 7, 8, 9, 10, 13, 14, 15, 16, 17, 18, 19, 20]
                // },
                // {
                //   id: 10002,
                //   type: 3,
                //   name: '野生动物',
                //   word_ids: [21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32]
                // }
              ]
            }
          ]
        }
      ]
    },
    async getAllWord () {
      const { data: { data } } = await axios({
        url: process.env.VUE_APP_BASE_API + '/word/get_all_word?word_version=1'
      })
      window.localStorage.setItem('all_word', data.value)

      // 自动生成class --------------------------------------
      const all_word_list = JSON.parse(data.value)
      const __arr = this.stage_list[0].children[0].children
      __arr.push({
        id: 10001,
        type: 3,
        name: '宠物',
        word_ids: []
      })
      all_word_list.forEach(item => {
        const lastI = __arr.length - 1
        if (__arr[lastI].word_ids.length >= 10) {
          __arr.push({
            id: __arr[lastI].id + 1,
            type: 3,
            name: '宠物',
            word_ids: [item.id]
          })
        } else {
          __arr[lastI].word_ids.push(item.id)
        }
      })
      window.localStorage.setItem('stage_list', JSON.stringify(this.stage_list))

      // class_list ---------------------------------------------
      const class_list = {}
      this.stage_list.forEach(item => {
        item.children.forEach(item => {
          item.children.forEach(item => {
            class_list[item.id] = item
          })
        })
      })
      window.localStorage.setItem('class_list', JSON.stringify(class_list))
    },
    toReview1 () {
      if (this.$route.path === '/review_en') return
      this.$router.push('/review_en')
    },
    toReview2 () {
      if (this.$route.path === '/review_zh') return
      this.$router.push('/review_zh')
    },
    toStudy (id) {
      if (this.$route.path === '/home') return
      this.$router.push('/home')
    },
    answerRight() {
      new Audio('http://39.105.216.113:8080/speech_word_zh/4/c/1/4c179b998961485efef05798808fef043c8fdd97.wav').play()
    },
    answerWrong() {
      new Audio('http://39.105.216.113:8080/speech_word_zh/2/9/4/2940f541f0eb202461ebc81b32801ae67ad540a0.wav').play()
    }
  }
}
</script>

<style lang="less">
nav {
  margin-top: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  div {
    width: 15vw;
    height: 8vw;
    border-radius: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4vw;
    font-weight: 700;
    color: #fff;
  }
  .study {
    background-color: skyblue;
  }
  .review {
    margin-left: 10vw;
    background-color: orange;
  }
}
</style>
